<html>
<div id="chatbox">
    <div id="chat-messages"></div>
    <input type="text" id="chat-input" placeholder="Type your message here">
    <button id="chat-submit">Submit</button>
</div>
<script>
    const chatMessages = document.getElementById('chat-messages');
    const chatInput = document.getElementById('chat-input');
    const chatSubmit = document.getElementById('chat-submit');

    chatSubmit.addEventListener('click', function () {
        let msg = chatInput.value;
        if((msg||'')===''){
            return;
        }
        // 发送用户输入的消息
        sendMessage(chatInput.value, 'user');

        // 获取自动回复的内容
        fetch('https://xxx.xxx.xxx.xx/test?msg=' + msg)
            .then(function (response) {
                return response.text();
            })
            .then(function (responseText) {
                // 发送自动回复的内容
                sendMessage(responseText, 'chatgpt');
            });
    });

    function sendMessage(message, sender) {
        const messageElem = document.createElement('div');
        messageElem.innerHTML = sender + ': ' + message;
        chatMessages.appendChild(messageElem);
        chatInput.value = '';
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }

</script>
<style>
    #chatbox {
        width: 500px;
        height: 400px;
        border: 1px solid #ccc;
        border-radius: 10px;
        padding: 10px;
        margin: 10px auto;
        box-shadow: 0px 0px 10px #ccc;
    }

    #chat-messages {
        height: 300px;
        overflow-y: scroll;
    }

    .message {
        padding: 10px;
        margin: 10px 0px;
        border-radius: 10px;
        font-size: 16px;
    }

    .user-message {
        background-color: #f2f2f2;
        float: left;
        clear: both;
        text-align: left;
    }

    .chatgpt-message {
        background-color: #b3e5fc;
        float: right;
        clear: both;
        text-align: right;
    }

    #chat-input {
        width: 100%;
        padding: 10px;
        margin-top: 10px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 10px;
        font-size: 16px;
    }

    #chat-submit {
        width: 100%;
        padding: 10px;
        margin-top: 10px;
        background-color: #ccc;
        border: none;
        border-radius: 10px;
        font-size: 16px;
        cursor: pointer;
    }
</style>

</html>
